<template>
  <div class="dataAllContainer">
    <div class="leftContainer">
      <div class="title">各状态救援仓数量</div>
      <div id="main" style="height: 400px; width: 500px"></div>
      <el-table
        :data="tableData"
        height="calc(100vh - 520px)"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          prop="operateTime"
          show-overflow-tooltip
          label="进入日期"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
            prop="phone"
            show-overflow-tooltip
            label="电话"
            width="100"
        >
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="住址">
        </el-table-column>
      </el-table>
    </div>
    <div class="centerContainer">
      <div class="title">各救援仓位置</div>
      <div id="containerMap"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { operateList, deviceList } from "@/api/index.js";
export default {
  name: "DataAll",
  data() {
    return {
      tableData: [],
    };
  },
  props: {
    prop: {
      type: String,
      required: false,
    },
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getStatus();
    this.createMap();
    this.getList();
  },
  updated() {},
  methods: {
    getList() {
      operateList({}).then((res) => {
        this.tableData = res;
      });
    },
    getStatus() {
      deviceList({}).then((res) => {
        console.log(res);
        this.drawChart(res);
      });
    },
    drawChart(data) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    createMap() {
      const map = new BMapGL.Map("containerMap"); // 创建Map实例
      map.centerAndZoom(new BMapGL.Point(117.14, 39.22), 13); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.setHeading(64.5); //设置地图旋转角度
      map.setTilt(30); //设置地图的倾斜角度

      // 创建点标记
      const marker1 = new BMapGL.Marker(new BMapGL.Point(117.14, 39.22));
      const marker2 = new BMapGL.Marker(
        new BMapGL.Point(117.150702, 39.229148)
      );
      const marker3 = new BMapGL.Marker(
        new BMapGL.Point(117.145042, 39.232963)
      );
      const marker4 = new BMapGL.Marker(
        new BMapGL.Point(117.138596, 39.236919)
      );
      const marker5 = new BMapGL.Marker(
        new BMapGL.Point(117.132434, 39.239476)
      );
      const marker6 = new BMapGL.Marker(
        new BMapGL.Point(117.216042, 39.213379)
      );
      const marker7 = new BMapGL.Marker(
        new BMapGL.Point(117.211191, 39.210723)
      );
      const marker8 = new BMapGL.Marker(new BMapGL.Point(117.115115, 39.19855));
      const marker9 = new BMapGL.Marker(new BMapGL.Point(117.11914, 39.205149));
      const marker10 = new BMapGL.Marker(
        new BMapGL.Point(117.112708, 39.20143)
      );
      const marker11 = new BMapGL.Marker(new BMapGL.Point(117.1286, 39.200925));
      const marker12 = new BMapGL.Marker(
        new BMapGL.Point(117.082405, 39.216219)
      );
      // 在地图上添加点标记
      map.addOverlay(marker1);
      map.addOverlay(marker2);
      map.addOverlay(marker3);
      map.addOverlay(marker4);
      map.addOverlay(marker5);
      map.addOverlay(marker6);
      map.addOverlay(marker7);
      map.addOverlay(marker8);
      map.addOverlay(marker9);
      map.addOverlay(marker10);
      map.addOverlay(marker11);
      map.addOverlay(marker12);
    },
  },

  destroyed() {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dataAllContainer {
  display: flex;
  .leftContainer {
    width: 500px;
    margin-right: 10px;
    .title {
      color: #fff;
      text-align: center;
    }
    #main {
      border: 2px solid #003a78;
      border-radius: 5px;
      padding: 5px;
    }
  }
  .centerContainer {
    width: calc(100vw - 520px);
    .title {
      color: #fff;
      text-align: center;
    }
    #containerMap {
      width: 100%;
      height: calc(100vh - 100px);
      border-radius: 5px;
      padding: 5px;
    }
  }
}
#main {
  border: 2px solid #003a78;
  border-radius: 5px;
  padding: 5px;
}
</style>
